<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="到账登记"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="d-flex">
      <div class="mr-5">
        <div class="accounting-progress" :class="`border-${statusStyle}`">
          <div class="font-weight-bold" :class="`text-${statusStyle}`">
            {{ enumArrivalStatus[editRow.payQxStatus] || '-' }}
          </div>
          <small class="text-muted">到账状态</small>
        </div>
      </div>
      <div class="flex-1">
        <table class="table table-sm table-borderless accounting-table">
          <tbody>
            <tr>
              <td width="15%">项目名称：</td>
              <td width="35%">{{ editRow.customer_name || '-' }}</td>
              <td width="15%">贷款金额：</td>
              <td width="35%">{{ editRow.reply_funds || '-' }}万元</td>
            </tr>
            <tr>
              <td>项目负责人：</td>
              <td>{{ editRow.corp_name || '-' }}</td>
              <td>联系电话：</td>
              <td>{{ editRow.mobile_no || '-' }}</td>
            </tr>
            <tr>
              <td>起保时间：</td>
              <td>{{ $utils.dateFormat(editRow.load_date, 'yyyy年MM月dd日') || '-' }}</td>
              <td>结束时间：</td>
              <td>{{ $utils.dateFormat(editRow.load_end_date, 'yyyy年MM月dd日') || '-' }}</td>
            </tr>
            <tr>
              <td>项目地址：</td>
              <td>{{ editRow.address || '-' }}</td>
              <td>放款银行：</td>
              <td>{{ editRow.bank_name || '-' }}</td>
            </tr>
            <tr>
              <td>担保费率：</td>
              <td>{{ editRow.gua_rate || '-' }}%</td>
              <td>缴费金额：</td>
              <td>{{ editRow.guaFunds || '-' }}元</td>
            </tr>
            <tr>
              <td>联保比例：</td>
              <td>{{ editRow.unionRate || '-' }}</td>
              <td>需支金额：</td>
              <td>{{ editRow.unionPayFunds || '-' }}元</td>
            </tr>
            <tr>
              <td>附件上传：</td>
              <td colspan="3">
                <img-card :images="attachImages" v-if="isViewMode"></img-card>
                <upload-oss
                  v-else
                  multiple
                  accept="image/*"
                  listType="picture-card"
                  ref="attachOss"
                  :file-list="attachFileList"
                  :limit="10"
                  :on-complete="handleImagesComplete"
                ></upload-oss>
              </td>
            </tr>
            <tr>
              <td></td>
              <td colspan="3" class="pt-5">
                <el-button
                  v-if="!isViewMode"
                  type="primary"
                  @click="confirmEdit"
                  :loading="saveLoading"
                  class="btn-long"
                >
                  支付确认
                </el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <el-alert
          v-if="isUnPayConfirm"
          title="尚未在 “缴费管理” 中确认到账登记，不能支付"
          type="warning"
          show-icon
          :closable="false"
        ></el-alert>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'
import { strFromOss } from '@/common/plugins/tools/format'

import ImgCard from '@/components/ImgCard'

const enumArrivalStatus = {
  0: '待查实',
  1: '待查实',
  2: '已到账',
}

const enumArrivalStatusStyle = {
  0: 'info',
  1: 'warning',
  2: 'success',
}

export default {
  components: {
    ImgCard,
  },
  props: {
    visible: Boolean,
    editRow: {
      type: Object,
      default() {
        return {}
      },
    },
    viewMode: Boolean,
  },
  data() {
    return {
      enumArrivalStatus,
      attachFileList: [],
      saveType: 0,
      leftFunds: '',
      saveLoading: false,
    }
  },
  computed: {
    statusStyle() {
      return enumArrivalStatusStyle[this.editRow.payQxStatus] || ''
    },
    isUnPayConfirm() {
      return this.editRow.payStatus !== 2
    },
    isViewMode() {
      return this.viewMode || +this.editRow.pay_qx_status === 2 || this.isUnPayConfirm
    },
    attachImages() {
      return this.attachFileList.map(item => item.url)
    },
  },
  watch: {
    editRow: {
      handler: function () {
        this.initForm()
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    initForm() {
      this.leftFunds = this.editRow.left_funds || ''
      this.attachFileList = arrayFromString(this.editRow.attachment_qx).map(img => ({
        name: '',
        url: img,
      }))
    },
    confirmEdit() {
      this.$confirm('确认支付?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          this.$refs.attachOss.submit()
        })
        .catch(() => {})
    },
    handleImagesComplete(images) {
      const formData = {
        pay_qx_status: 1,
        pay_qx_date: this.$utils.dateFormat(new Date()),
        attachment_qx: strFromOss(images),
      }
      this.updateData(formData)
    },
    async updateData(data) {
      this.saveLoading = true
      const [res] = await this.$utils.promise(
        this.$api.updateData(this.$serviceName, 'credit_warrant_fee_record', this.editRow.id, data)
      )
      this.saveLoading = false

      const hintText = '支付确认'
      if (!res) {
        return this.$message.error(`${hintText}失败，请重试`)
      }

      this.$message.success(`${hintText}成功`)
      this.$emit('success', res)
      this.beforeClose()
    },
  },
}
</script>
<style lang="scss" scoped>
.accounting-progress {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid;
  padding-top: 15px;
  text-align: center;
  clip-path: polygon(0% 90%, 0% 0%, 100% 0%, 100% 90%);
}
.label-text {
  display: inline-block;
  min-width: 90px;
  color: gray;
}
.accounting-table > tbody tr td:nth-of-type(2n + 1) {
  color: gray;
}
</style>
